<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eleMov-test</title>
    <style>
        body {
            margin: 0px;
            background-color: aquamarine;
        }

        .mov {
            position: absolute;
            left: -200px;
            width: 200px;
            height: 100%;
            background-color: rgb(54, 54, 54);
        }

        .btn_mov {
            position: absolute;
            margin-top: -50px;
            top: 50%;
            left: 100%;
            width: 50px;
            height: 100px;
        }

        .mov2 {
            position: absolute;
            left: 200px;
            width: 50px;
            height: 50px;
            background-color: rgb(54, 54, 54);
        }

        .btn_mov2 {
            position: absolute;
            top: 65px;
            left: 200px;
            width: 100px;
            height: 50px;

        }
    </style>
</head>

<body>
    <!-- 点击移动展开动画 -->
    <div class="mov">
        <button class="btn_mov">点击移动展开</button>
    </div>

    <!-- 点击移动动画 -->
    <div class="mov2"></div>
    <button class="btn_mov2">点击往复移动</button>



    <!-- script标签src引入 -->
    <script type="text/javascript" src="../src/tatu.js"></script>
    <script>

        /*  eleMov(): 移动动画---参数说明:
            参数一: htmlElement: 需要操作的html元素
            参数二: start: 初始位置，一般值为0，类型number
            参数三: end: 需要移动的距离，类型number
            参数四: duration: 完成时间（ms），一般大于等于1000ms，类型number
            参数五: direction: 移动方向，值为'h'水平方向 或者 'v'垂直方向，类型string
            参数六: timing: 运动曲线，值为'linear'线性，或者 'ease'渐慢，类型string
            参数七: vhRatio: v垂直移动距离 与 h水平移动距离的比值，类型number
            参数八: step: 步数间隔，最小值为1，类型number，此为1时，运动曲线为linear
            参数九: callback: 可选，动画完成后的回调函数
        */

        // 演示:点击移动展开动画
        const mov = document.querySelector('.mov');
        const btnMov = document.querySelector('.btn_mov');
        let flag = 1;
        btnMov.addEventListener('click', () => {
            if (flag === 1) {
                flag = 2;
                eleMov(mov, 0, mov.offsetWidth, 300, 'h', 'ease', 0, 2, () => {
                    flag = 3;
                });
            } else if (flag === 3) {
                flag = 2;
                eleMov(mov, mov.offsetWidth, 0, 300, 'h', 'ease', 0, 2, () => {
                    flag = 1;
                });
            };
        });

        // 演示:点击往复移动动画
        const mov2 = document.querySelector('.mov2');
        const btnMov2 = document.querySelector('.btn_mov2');
        let flag2 = true;
        btnMov2.addEventListener('click', () => {
            if (flag2) {
                flag2 = false;
                eleMov(mov2, 0, 200, 200, 'vh', 'ease', 1, 2, () => {
                    eleMov(mov2, 200, 0, 200, 'h', 'ease', 0, 2, () => {
                        eleMov(mov2, 0, 200, 200, 'h', 'ease', 0, 2, () => {
                            eleMov(mov2, 200, 0, 200, 'vh', 'ease', 1, 2, () => {
                                flag2 = true;
                            });
                        });
                    });
                });
            };
        });
    </script>
</body>

</html>